<template>
    <div class="box">
      <!-- 轮播图 -->
      <van-swipe :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swipe" :key="index">
          <img v-lazy="item.img" />
        </van-swipe-item>
      </van-swipe>
      <!-- 图片导航模块 -->
      <van-grid :column-num="3" :border="false">
        <van-grid-item text="新闻资讯" to="/newslist" >
          <img src="../../assets/img/menu1.png" alt="">
          <p>新闻资讯</p>
        </van-grid-item>      
        <van-grid-item text="图片分享" to="/photo/list" >
          <img src="../../assets/img/menu2.png" alt="">
          <p>图片分享</p>
        </van-grid-item>     
        <van-grid-item text="商品购买" to="/goods/list" >
          <img src="../../assets/img/menu3.png" alt="">
          <p>商品购买</p>
        </van-grid-item>      
        <van-grid-item text="联系我们" to="/contact" >
          <img src="../../assets/img/menu6.png" alt="">
          <p>联系我们</p>
        </van-grid-item>      
        <van-grid-item text="留言反馈" to="" >
          <img src="../../assets/img/menu4.png" alt="">
          <p>留言反馈</p>
        </van-grid-item>      
        <van-grid-item text="视频专区" to="" >
          <img src="../../assets/img/menu5.png" alt="">
          <p>视频专区</p>
        </van-grid-item>
      </van-grid>
    </div>
</template>

<script>
export default {
  data () {
    return {
      swipe:[],
      navImg:[]
    }
  },

  created () {
    this.getSwiper();
  },

  methods: {
    async getSwiper () {
      const {data:res} = await this.$axios.get('/api/getlunbo');
      this.swipe = res.message;
    },
  }
}
</script>

<style scoped lang='less'>

.van-swipe{
  height: 200px;
    img{
    height: 200px;
    width: 100%;
  }
}
.van-grid{
  font-size: 14px;
  img{
    width: 55px;
  }
  p{
    margin: 12px 0;
  }
}
</style>
